<template>
    <div class="container">
        <el-page-header @back="goBack" content="绑定客户组申请列表"></el-page-header>
        <div class="e-m-t-45 flex " style="justify-content: flex-end">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="选择客户组">
                    <el-select v-model="enterpriseId" clearable placeholder="选择客户组" class="e-m-r-15" @change="getList">
                        <el-option v-for="item in enterpriseList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键词">
                    <el-input placeholder="请输入" v-model="namekey" prefix-icon="el-icon-search" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column fixed type="index" width="50">
            </el-table-column>
            <el-table-column prop="enterprise" label="客户组名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.enterprise ? scope.row.enterprise.name : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="enterprise" label="部门名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.enterprise ? scope.row.enterprise.department : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="user" label="申请绑定用户" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.user ? scope.row.user.name : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="user" label="用户手机" width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.user ? scope.row.user.mobile : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="审核状态" width="150">
                <template slot-scope="scope">
                    <span class="color-warning" v-if="scope.row.state == 0">待审核</span>
                    <span class="color-danger" v-if="scope.row.state == 1">已取消</span>
                    <span class="color-danger" v-if="scope.row.state == 2">已驳回</span>
                    <span class="color-success" v-if="scope.row.state == 3">已通过</span>
                </template>
            </el-table-column>
            <el-table-column prop="createdate" label="申请时间" width="150">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                    <el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button>
                    <el-button @click="pass(scope.row.id)" type="text" size="small" v-if="scope.row.state == 0">审核</el-button>
                    <el-button @click="cancel(scope.row.id)" type="text" size="small" v-if="scope.row.state == 0">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
        <el-dialog title="查看申请详情" :visible.sync="dialogShow" width="800px">
            <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item label="客户组名称" v-if="form.enterprise">{{ form.enterprise.name }}</el-descriptions-item>
                <el-descriptions-item label="部门名称" v-if="form.enterprise">{{ form.enterprise.department }}</el-descriptions-item>
                <el-descriptions-item label="申请人" v-if="form.user">{{ form.user.name }}</el-descriptions-item>
                <el-descriptions-item label="申请状态">
                    <span class="color-warning" v-if="form.state == 0">待审核</span>
                    <span class="color-danger" v-if="form.state == 1">已取消</span>
                    <span class="color-danger" v-if="form.state == 2">已驳回</span>
                    <span class="color-success" v-if="form.state == 3">已通过</span>
                </el-descriptions-item>
                <el-descriptions-item label="联系号码" v-if="form.user">{{ form.user.mobile }}</el-descriptions-item>
                <el-descriptions-item label="申请时间">{{ form.createdate }}</el-descriptions-item>
                <el-descriptions-item label="操作时间">{{ form.actiontime }}</el-descriptions-item>
                <el-descriptions-item label="驳回原因" v-if="form.reason">{{ form.reason }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '客户组列表' 
        }
    },
    data() {
        return {
            usertype: 0,
            loading: true,
            namekey: '',
            phonekey: '',
            page: 1,
            pageSize: 10,
            total: 8,
            tableData: [],
            options: [{
                value: 0,
                label: '全部'
            },
            {
                value: 1,
                label: '散客'
            }, {
                value: 2,
                label: '客户组'
            }],
            dialogShow: false,
            form:{},
            enterpriseId: null,
            enterpriseList: []
        }
    },
    mounted() {
        this.getList()
        this.getEnterpriseList()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getList() {
            this.tableData = []
            this.loading = true

            this.$axios.post('/Enterprise/BindApply/List', {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "Key": this.namekey,
                "enterpriseId": !this.enterpriseId? 0 : this.enterpriseId,
                // "type": this.usertype, //1是散客，2是客户组
            }).then((res) => {
                this.loading = false
                this.tableData = res.rows;
                this.total = res.total;
            }).catch((err) => {
                this.loading = false
            })
        },
        getEnterpriseList() {
            this.enterpriseList = []
            this.loading = true
            
            let param =  {
                "PageIndex": 1,
                "PageSize": 999,
                "Key": '',
                // "type": this.usertype, //1是散客，2是客户组
                "order": [
                    {
                        "column": "regdate",
                        "isDesc": true
                    }
                ],
                "type": null,
                "parentId": 0,
                "cityId": 0,
                
            }

            this.$axios.post('/Enterprise/List', param).then((res) => {
                this.loading = false
                this.enterpriseList = res.rows;
            }).catch((err) => {
                this.loading = false
            })
        },
        cancel(id){
            this.$prompt('确认要拒绝申请吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
				inputErrorMessage: '请填写拒绝申请原因'
			}).then(({ value }) => {
				this.$axios.post('/Enterprise/BindApply/Cancel',{
					id: id,
					reason: value
				}).then((res)=>{
					this.$message({
						type: 'success',
						message: res.msg
					});
					this.getList()
				})
			})
        },
        pass(id){
            this.$confirm('您确认通过审核吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.get('/Enterprise/BindApply/Pass?id='+id).then((res) => {
                    this.$message.success(res.msg);
                    this.getList()
                })
            }).catch(() => {
              
            });
        },
        views(id) {
            this.dialogShow = true;
            this.$axios.get('/Enterprise/BindApply/Detail?id='+id).then((res)=>{
                this.form = res
            })
            // this.form = row
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
